<template>
	<view class="goodsSwiperBox">
		
		<view class='gswTitle'  style='padding-bottom: 60upx;'>
			<view class="gswTL" >
				<text style="font-size: 38upx;">特惠房源</text>
			</view>
			<view class="gswTR" @click="go" data-type="more">
				<image src='../../static/images-icon/右箭头.png' style="width: 30upx;height: 30upx;">
			</view>
		</view>
		<view class="section" v-show="show">
			<image src="../../static/images-icon/暂无搜索记录@3x.png" mode=""></image>
			<text style="font-size: 33upx;color:#909399;">信号异常，请检查网络后再试</text>
		</view>
		<swiper class="gswSw"  :display-multiple-items="config.multiple||3" :autoplay="config.autoplay"
		 next-margin="-280upx" @change="swiperChange" circular='true'>
			<swiper-item v-for="(list,i) in dataList.dataSet" :key="i">
				<view class="houseList" @tap='tapFun(list)' data-type="goods" :data-id="list.id" :data-index="i">
					<image :src="list.img_url1" mode="" class="hosImg"></image>
					<view class="detail">
						<text class="hostitle">{{list.title}}</text>
						<text class="hosproportion">{{list.proportion}}/m²</text>
						<text class="hosrentPrice">{{list.rent_price}}</text>
						<text class="hosbetp">押{{list.bet}}付{{list.pay}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import {
		Home
	} from '../../models/home.js'
	import {
		Util
	} from '../../utils/util.js'
	export default {
		name: "goodsSwiper",
		props: {
			config: {}
		},
		data() {
			return {
				dataList:{},
				current: 0,
				show:true,
			}
		},
		onLoad() {
			console.log('125')
		},
		async created() {
			this.dataList = await Home.spec();
			if(!Util.isNull(this.dataList)){
				this.show=false;
			}else{
				this.show=true;
			}
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
				this.$emit("change", e.detail.current)
			},
			tapFun(list) {
				var id = list.id;
				this.$emit("tapFun", {
					id: id,
				})
			},
			go(){
				uni.navigateTo({
					url:'../../pages/index/fy'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.goodsSwiperBox {
		width: 710upx;
		margin: 0 22upx;
		border-radius: 20upx;
		background: #fff;
		position: relative;
	}
	.section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-top: 50upx;
		image {
			width: 500upx;
			height: 300upx;
		}
	}
	.goodsSwiperBox .gswTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80upx;
		color: #999;
	}

	.goodsSwiperBox .gswTitle .gswTL {
		display: flex;
		align-items: center;
		font-size: 24upx;
	}

	.goodsSwiperBox .gswTitle .gswTL text:first-child {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 5upx;
		color: #000;
	}

	.goodsSwiperBox .gswTitle .gswTL text:nth-child(2) {
		background: red;
		color: #fff;
		border-radius: 16upx;
		line-height: 33upx;
		font-size: 22upx;
		padding: 0 12upx;
	}

	.goodsSwiperBox .gswTitle .gswTR {
		display: flex;
		align-items: center;
		font-size: 28upx;
	}

	.gswSw {
		height: 600upx;
		padding-bottom: 20upx;
		.houseList {
			padding: 0upx 12upx;
			display: flex;
			flex-direction: column;
			.hosImg {
				width: 100%;
				height: 230upx;
				border-radius: 10upx;
			}
				
			.detail {
				width: 445upx;
				height: 160upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
				flex-direction: column;
				font-size: 24upx;
				justify-content: space-between;
				
				.hostitle {
					font-size: 30upx;
					color: #333333;
				}
				
				.hosproportion {
					color: #4B4B4B;
				}
				
				.hosAddress {
					color: #4B4B4B;
				}
				
				.hosrentPrice {
					color: #F8811B;
					font-weight: bold;
					position: relative;
				
					&::before {
						content: '￥';
						font-weight: normal;
						font-size: 20upx;
					}
				}
				.hosbetp {
					font-size: 22upx;
					color: #FF8D2C;
					background-color: #FFF5DF;
					border-radius: 4upx;
					width: 90upx;
					padding: 1upx 10upx;
				}
				
			}
				
		}
	}

	
	.tab {
		margin-top: 15upx;
		display: flex;
		justify-content: space-between;
				/* background-color: red; */
				width: 290upx;
	}

	.tab>text {
		background-color:  #FFF5DF ;
		border-radius: 6upx;
		font-size: 22upx;
		color: #faa633;
		padding: 0 5upx;

	}
	.mm{
		position: relative;
		left: -19upx;
	}

</style>
